<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
	<meta charset="UTF-8">
	<link rel="shortcut icon" th:href="@{/fav.ico}">
	<link rel="stylesheet" th:href="@{/css/iconfont.css}">
	<link rel="stylesheet" th:href="@{/css/global.css}">
	<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
	<link rel="stylesheet" th:href="@{/css/bootstrap-theme.min.css}">
	<link rel="stylesheet" th:href="@{/css/swiper.min.css}">
	<link rel="stylesheet" th:href="@{/css/styles.css}">
	<script th:src="@{/js/jquery.1.12.4.min.js}" charset="UTF-8"></script>
	<script th:src="@{/js/bootstrap.min.js}" charset="UTF-8"></script>
	<script th:src="@{/js/swiper.min.js}" charset="UTF-8"></script>
	<script th:src="@{/js/global.js}" charset="UTF-8"></script>
	<script th:src="@{/js/jquery.DJMask.2.1.1.js}" charset="UTF-8"></script>
	<script type="text/javascript" th:src="@{/layer/layer.js}"></script>
	<script type="text/javascript" th:src="@{/mylayer.js}"></script>
	<title>个人资料</title>
</head>
<body >


	<div class="user-content__box clearfix bgf">
		<div class="title">个人中心-账户资料</div>
<!--		<div class="port b-r50" id="crop-avatar">-->
<!--			<div class="img"><img th:src="@{/images/icons/default_avt.png}" class="cover b-r50"></div>-->
<!--		</div>-->
		<form action="" class="user-setting__form" role="form">
			<div class="user-form-group">
				<label for="user-username">用户名：</label>
				<input type="text" id="user-username" readonly th:value="${user.username}">
			</div>
			<div class="user-form-group">
				<label for="user-nickname">昵称：</label>
				<input type="text" id="user-nickname" th:value="${otherData.nickname}" placeholder="请输入您的昵称">
			</div>
			<div class="user-form-group">
				<label for="user-phone">手机号：：</label>
				<input type="text" id="user-phone" th:value="${otherData.phone}" placeholder="请输入您的手机号">
			</div>
			<div class="user-form-group">
				<label for="user-email">邮箱：</label>
				<input type="text" id="user-email" th:value="${otherData.email}" placeholder="请输入您的邮箱">
			</div>
			<div class="user-form-group">
				<label for="user-question">密保问题：</label>
				<input type="text" id="user-question" th:value="${otherData.question}" placeholder="请输入您的密保问题">
			</div>
			<div class="user-form-group">
				<div class="input-group">
					<div class="input-group-addon">
						密保答案：
					</div>
					<input class="form-control password" name="password" id="user-answer" th:value="${otherData.answer}" placeholder="请输入密保答案" autocomplete="off" type="password">
				</div>
			</div>
			<div class="user-form-group gender">
				<label>性别：</label>
				<label><input type="radio" name="sex" value="1" th:checked="${otherData.gender==1}"><i class="iconfont icon-radio"></i> 男士</label>
				<label><input type="radio" name="sex" value="2" th:checked="${otherData.gender==2}"><i class="iconfont icon-radio"></i> 女士</label>
				<label><input type="radio" name="sex" value="0" th:checked="${otherData.gender==0}"><i class="iconfont icon-radio"></i> 保密</label>
			</div>
			<div class="user-form-group">
				<button type="button" id="change_btn" class="btn">确认修改</button>
			</div>
		</form>

	</div>

</body>
<script th:inline="javascript">
	var change_btn=$('#change_btn');
	change_btn.click(function (){
		var nickname=$('#user-nickname').val();
		var phone=$('#user-phone').val();
		var email=$('#user-email').val();
		var question=$('#user-question').val();
		var answer=$('#user-answer').val();
		var gender;
		gender = $("div.user-form-group.gender").find("input:checked").val();
		$.post(
			[[${#request.getContextPath()}]]+"/user/updateOtherDataSelective",
				{"email":email,"phone":phone,"question":question,"answer":answer,"nickname":nickname,"gender":gender},
			function(data) {
				if(data.code==0){
					mylayer.okMsg(data.msg);
				}else {
					mylayer.errorMsg(data.msg);
				}
			},
			'json'
		);

	})
</script>
</html>